<clr-modal [(clrModalOpen)]="opened">
    <h3 class="modal-title">{{'APP_ADD'|translate}}</h3>
    <div class="modal-body modal-height">
        <form clrForm #userForm='ngForm'>
            <clr-input-container>
                <label>{{"APP_NAME"|translate}}</label>
                <input clrInput [size]="32" maxlength="30" name="name" [(ngModel)]="item.name" pattern="{{namePattern}}"
                       required/>
                <clr-control-helper>{{'APP_REGION_NAME_HELPER'|translate}}</clr-control-helper>
                <clr-control-error>{{'APP_REGION_NAME_HELPER'|translate}}</clr-control-error>
            </clr-input-container>
            <clr-input-container>
                <label>{{"APP_EMAIL"|translate}}</label>
                <input clrInput [size]="32" name="email" [(ngModel)]="item.email"
                       [email]="true"
                       required/>
                <clr-control-error>{{'APP_EMAIL_ERROR_MSG'|translate}}</clr-control-error>
            </clr-input-container>
            <clr-input-container>
                <label>{{"APP_PASSWORD"|translate}}</label>
                <input style="display:none">
                <input clrInput type="password" [size]="32" name="password" id="password" [(ngModel)]="item.password"
                       (blur)="handleValidation('password')"
                       pattern="{{passwordPattern}}"
                       required/>
                <clr-control-error *ngIf="!getValidationState('namePwd')">
                    {{'USERNAME_PWD_INVALID'|translate}}
                </clr-control-error>
                <clr-control-error *ngIf="!getValidationState('password')">
                    {{'APP_PASSWORD_ERROR_MSG'|translate}}
                </clr-control-error>
                <clr-control-error *ngIf="!getValidationState('rePwdCheck')">
                    {{'APP_PASSWORD_HELP_MSG'|translate}}
                </clr-control-error>
            </clr-input-container>
            <clr-input-container>
                <label>{{"APP_CONFIRM_PASSWORD"|translate}}</label>
                <input style="display:none">
                <input  clrInput type="password" [size]="32" name="rePassword" [(ngModel)]="item.confirmPassword"
                       (blur)="handleValidation('rePassword')"
                       pattern="{{passwordPattern}}" required/>
                <clr-control-error *ngIf="!getValidationState('rePwdCheck')">
                    {{'APP_PASSWORD_HELP_MSG'|translate}}
                </clr-control-error>
                <clr-control-error *ngIf="!getValidationState('rePassword')">
                    {{'APP_PASSWORD_ERROR_MSG'|translate}}
                </clr-control-error>
            </clr-input-container>
            <clr-checkbox-container>
                <label>{{"APP_USER_ADMIN"|translate}}</label>
                <clr-checkbox-wrapper>
                    <input type="checkbox" clrCheckbox name="admin" value="true" [(ngModel)]="item.isAdmin"/>
                </clr-checkbox-wrapper>
            </clr-checkbox-container>
        </form>
        <app-modal-alert></app-modal-alert>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="onCancel()"
                [disabled]="isSubmitGoing">{{'APP_CANCEL'|translate}}</button>
        <button type="submit" class="btn btn-primary" (click)="onSubmit()"
                [disabled]="userForm.invalid || !isValid">{{'APP_COMMIT'|translate}}
        </button>
    </div>
</clr-modal>
